<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue.set的使用</title>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
    <div id="root">
        <h1>学生信息</h1>

        <button @click="student.age++">年龄+1岁</button><br>
        <button @click="addSex">添加性别属性，默认值：男</button><br>
        <button @click="student.sex='女'">修改性别</button><br>
        <button @click="addFriend">在列表首位添加一个朋友</button><br>
        <button @click="updateFirstFriendName">修改第一个朋友的名字为：jeny</button><br>
        <button @click="addHobby">添加一个爱好</button><br>
        <button @click="gan">修改第一个爱好为:吃饭</button>
        <button @click="remove">过滤掉爱好中的跳舞</button>

        <h2>学生名字:{{student.name}}</h2>
        <h2>学生年龄:{{student.age}}</h2>
        <h2>性别：{{student.sex}}</h2>
        <h2>朋友们</h2>
        <ul>
            <li v-for="(f,index) in student.friends" :key="index">
                {{f.name}}--{{f.age}}
            </li>
        </ul>
        <h2>爱好</h2>
        <ul>
            <li v-for="(h,index) in student.hobby" :key="index">
                {{h}}
            </li>
        </ul>
    </div>
</body>
<script type="text/javascript">
    Vue.config.productionTip=false;
    //用computer实现
    const vm=new Vue({
        el:'#root',
        data:{
            student:{
                name:'tom',
                age:20,
                hobby:['唱歌','跳舞','打篮球'],
                friends:[
                    {name:'mini',age:20},
                    {name:'jennie',age:20}
                ]
            }
        },methods: {
            addSex(){
                //Vue.set(this.student,'sex','男')
                this.$set(this.student,'sex','男')
            },
            addFriend(){
                this.student.friends.unshift({name:'jack',age:21})
            },
            updateFirstFriendName(){
                this.student.friends[0].name='jeny'
                this.student.friends[0].age='22'
            },
            addHobby(){
                this.student.hobby.push('吃饭')
            },
            gan(){
                // this.student.hobby.splice(0,1,'吃饭')
                // Vue.set(this.student.hobby,0,'吃饭')
                this.$set(this.student.hobby,0,'吃饭')
            },
            remove(){
               this.student.hobby=this.student.hobby.filter((h)=>{
                    return h!=='跳舞'
                })
            }
        }
    })
</script>
</html>